<template>
  <div class="film">
     <div class="movielist">
       <div class="city-fixed" @click="tolist">
         <span>{{cityName}}</span>
         <i class="iconfont icon-jiantouxia"></i>
       </div>
       <header v-if="flag">
         <div class="left">
           <div class="city">
             <span>{{cityName}}</span>
         <i class="iconfont icon-jiantouxia"></i>
           </div>
         </div>
         <div class="title">
             <div>电影</div>
           </div>
       </header>
       <div class="banner">
         <div class="mint-swipe">
           <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in banner" :key="item.id">
                  <img v-bind:src="item.imgUrl" v-bind:alt="item.name" />
                </div>
              </div>
                  <!-- 如果需要分页器 -->
                  <div class="swiper-pagination"></div>

            </div>
         </div>
       </div>
     </div>
     <div class="wrapper">
       <div class="tabs-bar">
         <ul class="tabs-nav">
           <li><router-link to="/film/nowmv">正在热映</router-link></li>
           <li><router-link to="/film/willmv">即将上映</router-link></li>
         </ul>
       </div>
     </div>
     <router-view></router-view>
  </div>
</template>

<script>
import {getMovieList,getBanner } from '@/api'
import getLocation from '@/module/getlocation.js'
import Swiper from 'swiper'
import "swiper/css/swiper.css"
export default {
  data() {
    return {
      list:[],
      banner:[],
      cityName:'',
      flag:false
    }
  },
  created(){
    getBanner().then(rest => {
      console.log(rest);
      this.banner = rest.data.data;
      console.log(this.banner);
      this.$nextTick().then(() => {
        var mySwiper = new Swiper(".swiper-container", {
          autoplay: {
            delay: 2000
          }, //可选选项，自动滑动
          loop: true,
          pagination: {
            el: ".swiper-pagination"
          }
        });
      });
    });
    // this.position()
    this.tofix()
    this.getcityname()
  },
  methods: {
    tolist(){
      this.$router.push('/location')
    },
    getcityname(){
      if(localStorage.getItem('cityName')){
        this.cityName = JSON.parse(localStorage.getItem('cityName'))
      }else{
        this.$router.push("/location")
      }
    },
    // position(){
    //   getLocation(city=>{
    //     this.city = city;
    //   })
    // },
    tofix(){
      window.addEventListener("scroll",()=>{
            var top =document.documentElement.scrollTop||document.body.scrollTop;
            if(top <=180){
              this.flag=false;
            }else{
              this.flag=true
            }
          })
    }
  },
  
}
</script>

<style scoped>
/* @import '~@/assets/swiper.min.css' */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.film{
  height: 100%
}
.movielist{
  position: relative
}
.movielist .city-fixed {
    position: absolute;
    top: 18px;
    left: 7px;
    color: #fff;
    z-index: 10;
    font-size: 13px;
    background: rgba(0,0,0,.2);
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    text-align: center;
    padding: 0 5px;
}
.movielist .city-fixed i{
  font-size: 10px;
}
.movielist header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
    line-height: 44px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    z-index: 3000;
    background-color: #fff;
    display: flex;
}
.movielist header>div{
  float: left;
    height: 44px;
}
.movielist header .left{
  min-width: 15%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 15px;
}
.movielist .city {
    display: flex;
    align-items: center;
}
.movielist .city span{
      font-size: 13px;
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #191a1b;
    padding-right: 5px;
    display: inline-block;
    height: 16px;
    line-height: 16px;
}
.movielist .city i{
  display: inline-block;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
}

.movielist header .title{
    text-align: center;
    font-size: 17px;
    color: #191a1b;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.movielist header .title div{
      color: #191a1b;
}
.banner{
  height: 56vw;
}
.mint-swipe{
  overflow: hidden;
  position: relative;
  height: 100%;
}
img{
  width: 100%;
  height:auto
}
.wrapper {
    
    z-index: 100;
    width: 100%;
    overflow-x: hidden;
    background: #fff;
    position: sticky;
    top:44px;
}
.tabs-bar {
    height: 49px;
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    transition: transform .2s cubic-bezier(.35,0,.25,1);
    transition: transform .2s cubic-bezier(.35,0,.25,1),-webkit-transform .2s cubic-bezier(.35,0,.25,1);
    position: relative;
}
.wrapper .tabs-bar .tabs-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    position: relative;
    height: 100%
}
.wrapper .tabs-bar .tabs-nav li {
    flex-shrink: 0;
    color: #191a1b;
    text-align: center;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    cursor: pointer;
    width: 50%;
    height: 100%;
}
.tabs-bar .tabs-nav li:active {
    color: #ff5f16;
}
.wrapper .tabs-bar:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ededed;
    color: #ededed;
    transform-origin: 0 100%;
    transform: scaleY(.5);
}
a {
  font-weight: bold;
  color: #2c3e50;
  height:100%;
  line-height: 49px;
  display: inline-block;
}
 a.router-link-exact-active {
  color: #ff5f16;
  border-bottom: 2px solid #ff5f16;
}
</style>